<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsMind</title>
    <link type="text/css" rel="stylesheet" href="../style/jsmind.css" />
    <link type="text/css" rel="stylesheet" href="../style/linshui.css" />
    <script type="text/javascript" src="../es6/jsmind.js"></script>
    <script type="text/javascript" src="../es6/jsmind.draggable-node.js"></script>
    <script type="text/javascript" src="./tools.js"></script>
    <!-- <script type="text/javascript" src="../features/jsmind.shell.js"></script> -->
    <style>
        #jsmind_container {
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div style="display: flex;">
        <div>
            <div id="jsmind_container"></div>
            <div id="outZoomButton" class="circle">━</div>
            <div id="inZoomButton" class="circle">✚</div>
            <label>宽：</label>
            <input id="widthinput" value="800" type="text" />
            <label>高：</label>
            <input id="heightinput" value="800" type="text" />
            <button id="submitbutton">修改画布大小</button>
        </div>
        <div>
            <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                <!-- 起点和终点标记 -->
                <circle cx="50" cy="50" r="5" fill="red" />
                <circle cx="350" cy="250" r="5" fill="blue" />

                <!-- 弧线弯曲连接 -->
                <path d="M50,50 
                    H175 
                    A25,25 0 0 1 200,75 
                    V225 
                    A25,25 0 0 0 225,250 
                    H350" stroke="black" stroke-width="2" fill="none" />

                <!-- 说明文字 -->
                <text x="50" y="40" text-anchor="middle">起点</text>
                <text x="350" y="240" text-anchor="middle">终点</text>
            </svg>
        </div>
    </div>


    <script>
        function linshuiLine({ ctx, start_point, end_point }) {
            console.log('linshuiLine', ctx, start_point, end_point)
            const x1 = start_point.x;
            const y1 = start_point.y;
            const x2 = end_point.x;
            const y2 = end_point.y;
            // 计算中间点（可以自定义逻辑）
            const midX = (x1 + x2) / 2;
            const radius = Math.abs(x1 - x2) * 0.25
            const h = Math.abs(x1 - x2) * 0.25
            // console.log('radius----->', radius)
            // d = 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
            d = ''

            if (y1 < y2 && x1 > x2) {
                const h1 = x1 - h
                // console.log('第一象限----->', x1, x2, Math.abs(x1 - x2), h, h1, h1 - radius)
                d = `M${x1},${y1} H${h1} A${radius},${radius} 0 0 0 ${h1 - radius},${y1 + radius} V${y2 - radius} A${radius},${radius} 0 0 1 ${x2 + h},${y2} H${x2}`
            }
            if (y1 < y2 && x1 < x2) {
                const h1 = x1 + h
                // console.log('第二象限----->', x1, x2, Math.abs(x1 - x2), h, h1, h1 - radius)
                d = `M${x1},${y1} H${h1} A${radius},${radius} 0 0 1 ${h1 + radius},${y1 + radius} V${y2 - radius} A${radius},${radius} 0 0 0 ${x2 - h},${y2} H${x2}`
            }
            if (y1 > y2 && x1 < x2) {
                const h1 = x1 + h
                // console.log('第三象限----->', x1, x2, Math.abs(x1 - x2), h, h1, h1 - radius)
                d = `M${x1},${y1} H${h1} A${radius},${radius} 0 0 0 ${h1 + radius},${y1 - radius} V${y2 + radius} A${radius},${radius} 0 0 1 ${x2 - h},${y2} H${x2}`
            }

            if (y1 > y2 && x1 > x2) {
                const h1 = x1 - h
                // console.log('第四象限----->', x1, x2, Math.abs(x1 - x2), h, h1, h1 - radius)
                d = `M${x1},${y1} H${h1} A${radius},${radius} 0 0 1 ${h1 - radius},${y1 - radius} V${y2 + radius} A${radius},${radius} 0 0 0 ${x2 + h},${y2} H${x2}`
            }

            if (y1 == y2 || x1 == x2) {
                ctx.setAttribute('d', 'M ' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2);
            } else {
                ctx.setAttribute('d', d);
            }
            ctx.setAttribute('stroke-dasharray', '3,4')

        }
        var _jm = null;
        var mind = {
            meta: {
                name: 'demo',
                author: 'hizzgdev@163.com',
                version: '0.2',
            },
            format: 'node_array',
            data: [
                { id: 'root', isroot: true, topic: '根节点', 'line-point-type': 'side' },

                { id: 'sub1', parentid: 'root', topic: 'sub1' },
                { id: 'sub1_11', parentid: 'sub1', topic: 'sub11' },
                { id: 'sub1_12', parentid: 'sub1', topic: 'sub12' },
                { id: 'sub1_13', parentid: 'sub1', topic: 'sub13' },

                { id: 'sub2', parentid: 'root', topic: 'sub2' },
                { id: 'sub2_21', parentid: 'sub2', topic: 'sub21' },
                { id: 'sub2_22', parentid: 'sub2', topic: 'sub22' },

                { id: 'sub3', parentid: 'root', topic: 'sub3' },
                { id: 'sub4', parentid: 'root', topic: 'sub4' },
                { id: 'sub5', parentid: 'root', topic: 'sub5' },
                { id: 'sub6', parentid: 'root', topic: 'sub6' },
                { id: 'sub7', parentid: 'root', topic: 'sub7' },
                { id: 'sub8', parentid: 'root', topic: 'sub8', direction: 'left', showExpand: false },
                { id: 'sub8_1', parentid: 'sub8', topic: 'sub8_1', border: 'none', 'foreground-color': "red" },
                { id: 'sub8_2', parentid: 'sub8', topic: 'sub8_2', border: 'none', 'background-color': 'red' },
                { id: 'sub8_3', parentid: 'sub8', topic: 'sub8_3', border: 'none' },
                { id: 'sub9', parentid: 'root', topic: 'sub7', direction: 'left' },
                { id: 'sub10', parentid: 'root', topic: 'sub7', direction: 'left' },
                { id: 'sub11', parentid: 'root', topic: 'sub7', direction: 'left' },
                { id: 'sub12', parentid: 'root', topic: 'sub7', direction: 'left' },
                { id: 'sub13', parentid: 'root', topic: 'sub7' },
                { id: 'sub14', parentid: 'root', topic: 'sub7' },
                { id: 'sub15', parentid: 'root', topic: 'sub7' },
                { id: 'sub16', parentid: 'root', topic: 'sub7' },
                { id: 'sub17', parentid: 'root', topic: 'sub7' }
            ],
        };
        function load_jsmind() {

            var options = {
                container: 'jsmind_container',
                editable: true,
                theme: 'niuxiaoma',
                log_level: 'debug',
                view: {
                    draggable: true,
                    hide_scrollbars_when_draggable: true,
                    node_overflow: 'wrap',
                    hmargin: 0,
                    vmargin: 0,
                    engine: 'svg',
                    line_width: 1,
                    line_color: '#555',
                    // line_style: 'straight',
                    custom_line_render: linshuiLine
                },
                layout: {
                    hspace: 40,
                    pspace: 16
                }
            };
            _jm = new jsMind(options);
            _jm.show(mind);
            console.log(_jm)
            // jm.set_readonly(true);
            // var mind_data = jm.get_data();
            // alert(mind_data);
        }
        load_jsmind()
    </script>
    <script>
        function outZoom() {
            if (_jm) {
                console.log(_jm)
                _jm.view.zoom_out()
            }
        }
        function inZoom() {
            if (_jm) {
                console.log(_jm)
                _jm.view.zoom_in()
            }
        }
        const outZoomButton = document.getElementById('outZoomButton');
        const inZoomButton = document.getElementById('inZoomButton');
        outZoomButton.addEventListener('click', outZoom);
        inZoomButton.addEventListener('click', inZoom);

    </script>
    <script>
        function submit() {
            const widthinput = document.getElementById('widthinput')
            const heightinput = document.getElementById('heightinput')
            console.log(widthinput.value, heightinput.value)
            const jsmind_container = document.getElementById('jsmind_container')
            jsmind_container.style.width = widthinput.value + 'px';
            jsmind_container.style.height = heightinput.value + 'px';
            console.log(_jm)
            if (_jm) {
                _jm.view.reset()
                _jm.show(mind)
            }
        }
        const submitbutton = document.getElementById('submitbutton')

        submitbutton.addEventListener('click', submit)
    </script>
</body>

</html>